<template>
	<!-- 图片展示、预览 组件 -->
	<view class="flex align-center justify-center">
		<image
			:class="{'bg-main-89': !props.src, 'image_hui': props.gray}"
			:mode="mode"
			:src="reallySrc"
			:style="styleObject"
			lazy-load
			lazy-load-margin="0.5"/>
	</view>
</template>

<script setup>
import {computed} from 'vue'
import {DEFAULT_BOOK_IMG} from '@/enums/icons'

/**
 * 图片组件
 * 统一接收数字类型
 * @property {Number} width = 100 图片宽度
 * @property {Number} height = 100 图片高度
 * @property {Number} border = 0 图片圆角
 * @property {Number} gray = false 图片置灰
 * @property {String} type = 'book' 默认图书类型
 */
const props = defineProps({
	src: {
		type: String,
		default: ''
	},
	width: {
		type: Number,
		default: 100
	},
	height: {
		type: Number,
		default: 100
	},
	border: {
		type: Number,
		default: 0
	},
	mode: {
		type: String,
		default: 'aspectFill'
	},
	gray: {
		type: Boolean,
		default: false
	},
	type: {
		type: String,
		default: 'book'
	}
})

const reallySrc = computed(() => {
	return props.src || DEFAULT_BOOK_IMG
})

const styleObject = computed(() => {
	return {
		width: `${props.width * 2}rpx`,
		height: `${props.height * 2}rpx`,
		borderRadius: `${props.border * 2}rpx`,
		zIndex: 2
	}
})
</script>

<style lang="scss" scoped>
.image_hui {
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
	opacity: 0.5;
}
</style>
